<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>用户登录</title>
	<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
	<meta name="author" content="Vincent Garreau" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" type="text/css" th:href="@{/css/login.css}"/>
	<link th:href="@{/mb/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
	<link th:href="@{/mb/css/css.css}" rel="stylesheet" type="text/css">
	<link th:href="@{/mb/css/Animation.css}" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" th:href="@{/style/container.css}">
</head>
<style type="text/css">
	.login-center-input img{width: 20px;height: 20px;}
	.login-center-input img:hover{cursor: pointer;}
	.img{position: absolute; right: 30px;width: 20px;height: 20px;margin-top: -112px;z-index: 999;}
</style>
<body>


<!--头部代码开始-->
<!--头开始-->
<header class="navbar-fixed-top headerbg">
	<div class="logo"><a href="http://www.baidu.com" th:href="@{/mc/}" class="fl mt10">
		<img th:src="@{/mb/images/mclogo.png}" style="margin-top: -30px;margin-left: 30px" alt=""></a></div>
	<div class="navBox hidden-xs hidden-sm"  style="float: right;margin-right: 10%">
		<ul class="navList list-unstyled">
			<li class="navLi"><h3><a href="http://www.baidu.com" th:href="@{/mc/}" ><span>首页</span></a></h3></li>
			<li class="navLi"><h3><a href="http://www.baidu.com" th:href="@{/mc/item/itemsList}"><span>项目</span></a></h3></li>
			<li class="navLi"><h3><a href="javascript:click()" ><span>帮助</span></a></h3></li>
			<li class="navLi  on"><h3><a href="http://www.baidu.com"  th:href="@{/mc/login}"><span>登录</span></a></h3></li>
			<li class="navLi"><h3><a href="http://www.baidu.com" th:href="@{/mc/register}"><span>注册</span></a></h3></li>
			<li class="navLi" style="overflow: hidden;display: none"><h3><a href="javascript:click()"><img th:src="@{/images/center.png}" height="60px" width="60px"></a></h3></li>
		</ul >
	</div>
</header>
<!--头结尾-->
<!--动态线条-->
<div class="bannerN animated" style="height: 100px;">
	<div class="imgFull"><img  class="img-responsive" th:src="@{/mb/images/ab_bg_01.png}" ></div>
	<div class="clouds_one"></div>
	<div class="clouds_two"></div>
	<div class="clouds_three"></div>
</div>
<!--动态线条结尾-->
<!--流程开始-->
<!--头部代码结束-->



<div id="particles-js">
	<div class="login">
		<form th:action="@{/mc/logged/login}" method="get">
			<div class="login-top">
				登录
			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img th:src="@{/images/name.png}"/></div>
				<div class="login-center-input">
					<input type="text" name="username" value="" required="required"  placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
					<div class="login-center-input-text">用户名</div>
				</div>
			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img th:src="@{/images/password-login.png}"/></div>
				<div class="login-center-input">
					<input type="password" name="password" id="password_input" value="" required="required" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"></input>
					<div class="login-center-input-text">密码</div>

					<div style="margin-top:15px;"><a th:href="@{/mc/register}"><span style="color: red;font-size: 14px;">还没注册账号?</span></a></div>
				</div>
			</div>
			<div class="login-button"><input type="submit" value="登录"/></div>
			<div class="img"><img id="password_show" onclick="hideShowPsw()" th:src="@{/images/closeyes.png}"/></div>
		</form>
	</div>
	<div class="sk-rotating-plane"></div>
</div>

<!--联系我们-->
<div class="contact-container">
	<div class="contact-connect-container">
		<div class="button-container">
			<img th:src="@{/images/contacts.png}"/><span style="margin-left: 5px;">联系我们</span>
		</div>
		<div class="pop" style="display: none;">
			<div class="word" style="text-align: center;"><span style="font-size: 12px;">在线咨询请扫描下面二维码👇</span></div>
			<div style="height: 120px;width: 120px;margin:20px 22px;">
				<img th:src="@{/images/QR.jpg}" style="width: 120px;height: 120px;margin-top: -15px;"/>
			</div>
		</div>
	</div>
</div>

<footer class="footerBg">
	<div class="container"><span class="footer_logo"><img th:src="@{/mb/images/mclogo.png}"></span><span class="CopyRight_name">码虫互联网服务外包平台 </span></div>
</footer>
</body>
<!-- scripts -->
<script th:src="@{/mb/js/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/js/Contacts.js}"></script>
<script th:src="@{/js/particles.min.js}"></script>
<script th:src="@{/js/app.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.lazyload.mini.js}"></script>
<script type="text/javascript">
    // 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制
    var demoImg = document.getElementById("password_show");
    var demoInput = document.getElementById("password_input");
    //隐藏text block，显示password block
    function hideShowPsw(){
        if (demoInput.type == "password") {
            demoInput.type = "text";
            password_show.src = "../images/openeyes.png";
        }else {
            demoInput.type = "password";
            password_show.src = "../images/closeyes.png";
        }
    }
</script>
<script type="text/javascript">
    function click()
    {
        window.alert("请先登录账号！");
    }
</script>

</html>